Roll Your Own Rollover Scripts

Part 2

First one

Second one

Last one

Example 1

At left is an example of how the basic script is used to change a lot of separate instances of one graphic. If you let Dreamweaver write this code for you, it will be three times longer than this example, because Dreamweaver will repeat all the JavaScript each time the image appears. (Humans write code more efficiently than machines.)

The two images used above:

check_off.gif

check_on.gif

Example 2

The three text links at right show how one image can be changed into a variety of different images.

Choose one: (a) books (b) computer (c) TV set

This "trick" uses exactly the same JavaScript rollover script as all the other examples shown here.

The way Example 2 works should be clear to you if you understood the instructions about using the NAME attribute (on the basic rollover examples page). All the images must be the same WIDTH and HEIGHT for this to work properly -- if they are different sizes, they will be stretched to fit the WIDTH and HEIGHT of the first image (in this case, the first image is a transparent GIF, so it looks as if there is no image).

> Return to JavaScripts index